<template>
	<view style="padding: 20rpx;">
		<view class="box">
			<uni-forms :model-value="form" label-width="140rpx" label-align="right">
				<uni-forms-item label="头像" name="avatar">
					<uni-file-picker limit="1" :image-styles="imageStyles" :del-icon="false" :disable-preview="true"
						fileMediatype="image" v-model="avatar" @select="handleAvatarUploadSuccess"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="姓名" name="userName">
					<uni-easyinput type="text" v-model="form.userName" placeholder="" disabled></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="昵称" name="nickName">
					<uni-easyinput type="text" v-model="form.nickName" placeholder="请输入昵称"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="性别" name="sex">
					<uni-data-checkbox style="position: relative; top: 10rpx;" v-model="form.sex"
						:localdata="range"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item v-if="!idNumber.length"    label="身份证号码" name="idNumber">
					<uni-easyinput type="text" v-model="form.idNumber" placeholder="请输入身份证号码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="手机号码" name="phonenumber">
					<uni-easyinput type="text" v-model="form.phonenumber" placeholder="请输入手机号码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="邮箱" name="email">
					<uni-easyinput type="text" v-model="form.email" placeholder="请输入邮箱"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="联系地址" name="address">
					<uni-easyinput type="textarea" v-model="form.address" placeholder="请输入联系地址"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="账户余额" name="account">
					<uni-easyinput type="text" v-model="form.account" placeholder="" disabled></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<button size="mini" type="primary" @click="save">保 存</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: [],
				form: {},
				header: {},
				idNumber:'',
				user: uni.getStorageSync('xm-user'),
				imageStyles: {
					"height": 80, // 边框高度
					"width": 80, // 边框宽度
					"border": { // 如果为 Boolean 值，可以控制边框显示与否
						"color": "#eee", // 边框颜色
						"width": "1px", // 边框宽度
						"style": "solid", // 边框样式
						"radius": "50%" // 边框圆角，支持百分比
					}
				},
				range: [{
					text: '男',
					value: '0'
				}, {
					text: '女',
					value: '1'
				}]
			}
		},
		onLoad() {
			this.form = JSON.parse(JSON.stringify(this.user));
			this.idNumber=this.form.idNumber;
			this.header = {
					token: this.form.token
				},
				this.avatar = [{
					url: this.user.avatar
				}]
		},
		methods: {
			handleAvatarUploadSuccess(e) {
				let _this = this;
				const filePath = e.tempFilePaths[0];
				uni.uploadFile({
					url: _this.$baseUrl + '/file/upload',
					header: _this.header,
					filePath: filePath,
					name: "file",
					success(res) {
						let url = JSON.parse(res.data || '{}').data;
						_this.form.avatar = url;
					}
				})
			},
			save() {
				this.$request.post('/user/updateUser', this.form).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						})
						uni.setStorageSync('xm-user', this.form);
					} else {
						uni.showToast({
							icon: 'error',
							title: JSON.stringify(res.msg)
						})
					}
				})
			}
		}
	}
</script>

<style>
	.box {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
	}
</style>